<!-- layouts/MainLayout.vue -->
<template>
  <div class="main-layout">
    <!-- 移动端菜单切换按钮 -->
    <div class="mobile-menu-toggle" @click="toggleMobileMenu" v-if="isMobile">
      <el-button 
        circle 
        class="mobile-toggle-btn"
        :icon="isMobileMenuOpen ? Close : Menu"
      />
    </div>
    
    <!-- 顶部导航栏 -->
    <header class="main-header">
      <!-- 左侧：品牌Logo和系统名称 -->
      <div class="header-left">
        <Logo />
      </div>
      
      <!-- 右侧：用户操作区 -->
      <div class="header-right">
        <!-- 组织切换器 -->
        <OrganizationSwitcher />
        
        <!-- 主题切换 -->
        <ThemeToggle />
        
        <!-- 消息通知 -->
        <NotificationBadge />
        
        <!-- 用户头像和下拉菜单 -->
        <UserMenu :is-mobile="isMobile" />
      </div>
    </header>
    
    <div class="layout-container">
      <!-- 左侧菜单 -->
      <Sidebar 
        :is-collapsed="isSidebarCollapsed"
        :is-mobile-open="isMobileMenuOpen"
        @toggle-collapse="toggleCollapse"
        @menu-open="handleMenuOpen"
        @menu-close="handleMenuClose"
      />
      
      <!-- 主内容区 -->
      <MainContent />
    </div>
    
    <!-- 移动端遮罩 -->
    <MobileMask 
      :is-mobile="isMobile" 
      :is-open="isMobileMenuOpen" 
      @close="closeMobileMenu"
    />
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAppStore } from '@/stores/appStore'
import { menuConfig as mainMenu } from '@/config/menu'
import ThemeToggle from '@/components/navigation/ThemeToggle.vue'
import NotificationBadge from '@/components/navigation/NotificationBadge.vue'
import UserMenu from '@/components/navigation/UserMenu.vue'
import Logo from '@/components/navigation/Logo.vue'
import Sidebar from '@/components/navigation/Sidebar.vue'
import MainContent from '@/components/navigation/MainContent.vue'
import MobileMask from '@/components/navigation/MobileMask.vue'
import OrganizationSwitcher from '@/components/OrganizationSwitcher.vue'
import { Menu, Close } from '@element-plus/icons-vue'

const appStore = useAppStore()
const route = useRoute()
const router = useRouter()

// 响应式数据
const isMobile = ref(false)
const isMobileMenuOpen = ref(false)
const windowWidth = ref(window.innerWidth)

// 计算属性
const isSidebarCollapsed = computed(() => appStore.isSidebarCollapsed)
const activeMenu = computed(() => appStore.activeMenu)
const unreadCount = computed(() => appStore.unreadCount)
const user = computed(() => appStore.user)

const filteredMenuItems = computed(() => {
  return mainMenu.filter(item => {
    // 检查权限
    if (item.meta.requiresAdmin && !appStore.user?.isAdmin) {
      return false
    }
    return true
  })
})

// 方法
const toggleCollapse = () => {
  appStore.toggleSideBar()
}

const handleMenuOpen = (index: string) => {
  console.log('菜单展开:', index)
}

const handleMenuClose = (index: string) => {
  console.log('菜单关闭:', index)
}

const showNotifications = () => {
  console.log('显示通知')
}

const closeMobileMenu = () => {
  isMobileMenuOpen.value = false
}

const toggleMobileMenu = () => {
  isMobileMenuOpen.value = !isMobileMenuOpen.value
}

const checkIsMobile = () => {
  isMobile.value = windowWidth.value < 768
}

const handleResize = () => {
  windowWidth.value = window.innerWidth
  checkIsMobile()
}

// 生命周期
onMounted(() => {
  checkIsMobile()
  window.addEventListener('resize', handleResize)
  
  // 加载用户组织信息
  appStore.loadUserOrganizations();
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped>
.main-layout {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 移动端菜单切换按钮 */
.mobile-menu-toggle {
  display: none;
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 2001;
}

.mobile-toggle-btn {
  background: var(--primary-blue, #1890ff);
  color: white;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
  transition: all 0.3s ease;
}

.mobile-toggle-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
}

/* 顶部导航栏 */
.main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  padding: 0 20px;
  background: linear-gradient(135deg, var(--header-bg, #ffffff) 0%, #fafafa 100%);
  border-bottom: 1px solid var(--header-border, #f0f0f0);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(10px);
  z-index: 1000;
}

.header-left {
  display: flex;
  align-items: center;
  padding: 0 16px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* 布局容器 */
.layout-container {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* 移动端适配 */
@media (max-width: 767px) {
  .main-header {
    background: var(--header-bg, #ffffff);
  }
  
  .mobile-menu-toggle {
    display: block;
  }
}
</style>